<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加宠物 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/admin-sidebar.jsp" %>
            </div>
            
            <!-- 主内容区 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                    <!-- 页面标题 -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2><i class="fas fa-plus me-2"></i>添加宠物</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/pages/admin/dashboard.jsp">首页</a></li>
                                <li class="breadcrumb-item"><a href="${pageContext.request.contextPath}/pet/list?action=list">宠物管理</a></li>
                                <li class="breadcrumb-item active">添加宠物</li>
                            </ol>
                        </nav>
                    </div>

                    <!-- 提示信息 -->
                    <c:if test="${not empty error}">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>${error}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>

                    <!-- 添加表单 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-paw me-2"></i>宠物信息</h5>
                        </div>
                        <div class="card-body">
                            <form action="${pageContext.request.contextPath}/pet/add" method="post" id="petForm">
                                <input type="hidden" name="action" value="add">
                                
                                <div class="row">
                                    <!-- 基本信息 -->
                                    <div class="col-md-6">
                                        <h6 class="text-primary mb-3"><i class="fas fa-info-circle me-2"></i>基本信息</h6>
                                        
                                        <div class="mb-3">
                                            <label for="petName" class="form-label">宠物姓名 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="petName" name="petName" 
                                                   value="${pet.petName}" required maxlength="50" placeholder="请输入宠物姓名">
                                        </div>

                                        <div class="mb-3">
                                            <label for="petType" class="form-label">宠物类型 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="petType" name="petType" required onchange="loadBreeds()">
                                                <option value="">请选择宠物类型</option>
                                                <option value="狗" ${pet.petType == '狗' ? 'selected' : ''}>狗</option>
                                                <option value="猫" ${pet.petType == '猫' ? 'selected' : ''}>猫</option>
                                                <option value="鸟" ${pet.petType == '鸟' ? 'selected' : ''}>鸟</option>
                                                <option value="兔子" ${pet.petType == '兔子' ? 'selected' : ''}>兔子</option>
                                                <option value="仓鼠" ${pet.petType == '仓鼠' ? 'selected' : ''}>仓鼠</option>
                                                <option value="龟" ${pet.petType == '龟' ? 'selected' : ''}>龟</option>
                                                <option value="鱼" ${pet.petType == '鱼' ? 'selected' : ''}>鱼</option>
                                                <option value="其他" ${pet.petType == '其他' ? 'selected' : ''}>其他</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="breed" class="form-label">品种</label>
                                            <select class="form-select" id="breed" name="breed">
                                                <option value="">请先选择宠物类型</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="gender" class="form-label">性别</label>
                                            <select class="form-select" id="gender" name="gender">
                                                <option value="">请选择性别</option>
                                                <option value="male" ${pet.gender == 'male' ? 'selected' : ''}>雄性</option>
                                                <option value="female" ${pet.gender == 'female' ? 'selected' : ''}>雌性</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="color" class="form-label">毛色</label>
                                            <input type="text" class="form-control" id="color" name="color" 
                                                   value="${pet.color}" maxlength="30" placeholder="请输入毛色">
                                        </div>
                                    </div>

                                    <!-- 详细信息 -->
                                    <div class="col-md-6">
                                        <h6 class="text-primary mb-3"><i class="fas fa-chart-line me-2"></i>详细信息</h6>
                                        
                                        <div class="mb-3">
                                            <label for="age" class="form-label">年龄（月）</label>
                                            <input type="number" class="form-control" id="age" name="age" 
                                                   value="${pet.age}" min="0" max="300" placeholder="请输入年龄（月）">
                                            <div class="form-text">请输入宠物的年龄，单位为月</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="weight" class="form-label">体重（kg）</label>
                                            <input type="number" class="form-control" id="weight" name="weight" 
                                                   value="${pet.weight}" min="0" max="1000" step="0.1" placeholder="请输入体重">
                                            <div class="form-text">请输入宠物的体重，单位为千克</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="status" class="form-label">健康状态</label>
                                            <select class="form-select" id="status" name="status">
                                                <option value="healthy" ${pet.status == 'healthy' ? 'selected' : ''}>健康</option>
                                                <option value="sick" ${pet.status == 'sick' ? 'selected' : ''}>生病</option>
                                                <option value="treatment" ${pet.status == 'treatment' ? 'selected' : ''}>治疗中</option>
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="ownerId" class="form-label">主人ID <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control" id="ownerId" name="ownerId" 
                                                   value="${pet.ownerId}" required min="1" placeholder="请输入主人的用户ID">
                                            <div class="form-text">请输入宠物主人的用户ID</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="description" class="form-label">描述信息</label>
                                            <textarea class="form-control" id="description" name="description" 
                                                      rows="4" maxlength="500" placeholder="请输入宠物的描述信息">${pet.description}</textarea>
                                            <div class="form-text">最多500个字符</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 提交按钮 -->
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <div class="d-flex justify-content-end">
                                            <a href="${pageContext.request.contextPath}/pet/list?action=list" 
                                               class="btn btn-outline-secondary me-2">
                                                <i class="fas fa-times me-2"></i>取消
                                            </a>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-save me-2"></i>保存
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 品种数据
        const breedData = {
            '狗': ['金毛', '拉布拉多', '泰迪', '哈士奇', '萨摩耶', '边牧', '德牧', '比熊', '柯基', '博美'],
            '猫': ['英短', '美短', '布偶', '暹罗', '波斯', '缅因', '折耳', '加菲', '俄蓝', '土猫'],
            '鸟': ['鹦鹉', '金丝雀', '文鸟', '虎皮鹦鹉', '玄凤鹦鹉'],
            '兔子': ['垂耳兔', '侏儒兔', '安哥拉兔', '荷兰兔'],
            '仓鼠': ['金丝熊', '三线仓鼠', '一线仓鼠', '布丁仓鼠'],
            '龟': ['巴西龟', '草龟', '花龟', '鳄龟'],
            '鱼': ['金鱼', '锦鲤', '热带鱼', '观赏鱼'],
            '其他': ['混种', '其他']
        };

        // 加载品种列表
        function loadBreeds() {
            const petType = document.getElementById('petType').value;
            const breedSelect = document.getElementById('breed');
            
            // 清空品种选项
            breedSelect.innerHTML = '<option value="">请选择品种</option>';
            
            if (petType && breedData[petType]) {
                breedData[petType].forEach(breed => {
                    const option = document.createElement('option');
                    option.value = breed;
                    option.textContent = breed;
                    breedSelect.appendChild(option);
                });
            }
        }

        // 表单验证
        document.getElementById('petForm').addEventListener('submit', function(e) {
            const petName = document.getElementById('petName').value.trim();
            const petType = document.getElementById('petType').value;
            const ownerId = document.getElementById('ownerId').value;
            
            if (!petName) {
                e.preventDefault();
                alert('请输入宠物姓名');
                document.getElementById('petName').focus();
                return;
            }
            
            if (!petType) {
                e.preventDefault();
                alert('请选择宠物类型');
                document.getElementById('petType').focus();
                return;
            }
            
            if (!ownerId || ownerId <= 0) {
                e.preventDefault();
                alert('请输入有效的主人ID');
                document.getElementById('ownerId').focus();
                return;
            }
        });

        // 页面加载时初始化品种列表
        document.addEventListener('DOMContentLoaded', function() {
            const petType = document.getElementById('petType').value;
            if (petType) {
                loadBreeds();
                // 如果有预设的品种值，设置选中
                const breedValue = '${pet.breed}';
                if (breedValue) {
                    document.getElementById('breed').value = breedValue;
                }
            }
        });
    </script>
</body>
</html>
